import { useNavigate } from 'react-router-dom'
import style from './register.module.css'
import { Form, Input, NavBar, Button, Toast } from 'antd-mobile'
import { userRegister, code } from '../api/user';
import { useState } from 'react';
function Register() {
    const navigate = useNavigate();
    const back = () => navigate("/");
    const [form, setForm] = useState({
        email: "",
        verification_code: "",
        password: "",
        repassword: ""
    })
    async function handleCode() {
        if (form.email) {
            try {
                const data = await code({ email: form.email });
                if (data.code === 200) {
                    Toast.show({
                        icon: 'success',
                        content: data.data,
                    })
                }
            }
            catch {
                Toast.show({
                    icon: 'fail',
                    content: '发送失败',
                })

            }
        }
        else {
            Toast.show({
                icon: 'fail',
                content: '请输入邮箱',
            })
        }
    };
    async function handleSumbit() {
        try {
            const data = await userRegister({ ...form });
            console.log(data, "data")
            if (data.code === 200) {
                Toast.show({
                    icon: 'success',
                    content: data.data,
                })
            }
            navigate("/")
        }
        catch {
            console.log(form, "fff")
            Toast.show({
                icon: 'fail',
                content: '注册失败',
            })
        }
    }
    return (
        <div className={style.Register}>
            <NavBar onBack={back}>欢迎来到注册页</NavBar>
            <Form layout='horizontal' mode='card' className={style.form}>
                <Form.Item label='姓名' name='username' rules={[{
                    validator: (_, value) => {
                        let nameReg = /^([\u4e00-\u9fa5]{2,20}|[a-zA-Z.\s]{2,20})$/;
                        if (nameReg.test(value)) {
                            return Promise.resolve()
                        } else {
                            return Promise.reject(new Error('请输入正确的姓名!'));
                        }
                    }
                }]}>
                    <Input placeholder='请输入姓名' onChange={(e) => {
                        setForm({
                            ...form,
                            name: e
                        })
                    }} />
                </Form.Item>
                <Form.Item label='邮箱地址' name='email' rules={[
                    {
                        validator: (_, value) => {
                            var pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
                            var domains = ["qq.com", "163.com", "vip.163.com", "263.net", "yeah.net", "sohu.com", "sina.cn", "sina.com", "eyou.com", "gmail.com", "hotmail.com", "42du.cn"];
                            if (pattern.test(value)) {
                                var domain = value.substring(value.indexOf("@") + 1);
                                for (var i = 0; i < domains.length; i++) {
                                    if (domain == domains[i]) {
                                        return Promise.resolve();
                                    }
                                }
                            }
                            return Promise.reject(new Error('请输入合法邮箱!'));
                        },
                    },
                ]}>
                    <Input placeholder='请输入邮箱地址' onChange={(e) => {
                        setForm({
                            ...form,
                            email: e
                        })
                    }} />
                </Form.Item>
                <Form.Item label='请输入密码' name="password" rules={[{
                    validator: (_, value) => {
                        let passwordReg = /^[\w_-]{6,16}$/
                        if (passwordReg.test(value)) {
                            return Promise.resolve()
                        } else {
                            return Promise.reject(new Error('请按规则输入密码!'));
                        }
                    }
                }]}>
                    <Input placeholder='请输入密码' name='repassword' onChange={(e) => {
                        setForm({
                            ...form,
                            password: e
                        })
                    }} />
                </Form.Item>
                <Form.Item label='确认密码' rules={[
                    ({ getFieldValue }) => ({
                        validator: (rule, value) => {
                            if (!value || getFieldValue('password') === value) {
                                return Promise.resolve()
                            }
                            return Promise.reject(('两次输入密码不一致!'));
                        }
                    })
                ]}>
                    <Input placeholder='请再次输入密码' onChange={(e) => {
                        setForm({
                            ...form,
                            repassword: e
                        })
                    }} />
                </Form.Item>
                <Form.Item label='短信验证码' extra={<a onClick={handleCode}>发送验证码</a>}>
                    <Input placeholder='请输入验证码' onChange={(e) => {
                        setForm({
                            ...form,
                            verification_code: e
                        })
                    }} />
                </Form.Item>
            </Form>
            <Button block color='success' size='large' className={style.btn} onClick={handleSumbit}>
                确认注册
            </Button>
        </div>
    )
}
export default Register;